<template>
  <div class="container">
    <el-card class="box-card">
      <div slot="header">
        <span class="title">叉车使用规则</span>
        <el-button type="text" class="edit-btn" @click="editForklift">编辑</el-button>
      </div>
      <el-form align="left" :model="formInline" label-width="140px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="重量超过：">
              <el-input maxlength="20" show-word-limit v-model.number="formInline.weight" disabled>
                <template slot="append">kg</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="体积超过：">
              <el-input maxlength="20" show-word-limit v-model.number="formInline.volume" disabled>
                <template slot="append">m<sup>3</sup></template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-divider></el-divider>
      <div class="choosen-partition">
        <el-row>
          <el-col :span="4" align="center">已选择库区：</el-col>
          <el-col :span="20">
            <el-row>
              <el-col :span="3" v-for="item in choosenList" :key="item.partitionid">
                <el-tag :key="item.partitionid" effect="dark">{{ item.partitionname }}</el-tag>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <forkliftPopup
      v-if="forkliftPopupVisible"
      :dialogVisible="forkliftPopupVisible"
      :detail="forkliftDetail"
      @callback="getData"
      @close="forkliftPopupVisible=false">
    </forkliftPopup>
  </div>
</template>
<script>
export default {
  name:'forklift',
  data(){
    return {
      formInline:{
        weight:0, // 重量
        volume:0 // 体积
      },
      choosenList:[], // 已选择库区
      forkliftDetail:'', // 叉车规则info
      forkliftPopupVisible:false // 控制选择库区dialog显示隐藏
    }
  },
  mounted(){
    this.getData()
  },
  components:{
    forkliftPopup:()=>import('@/components/forklift/forklift-popup')
  },
  methods:{
    getData(){
      let options = {
        method:'get',
        url:`/parametersettings/getparm4forklift`
      }
      this.$axios(options).then(({ data }) => {
        let {weight,volume,warehousepartitions} = data
        Object.assign(this.formInline,{weight,volume})
        this.choosenList = warehousepartitions
      })
    },
    // 编辑叉车规则
    editForklift(){
      let partitionids = []
      this.choosenList.forEach((item)=>{
        partitionids.push(item.partitionid)
      })
      this.forkliftDetail = Object.assign({},this.formInline,{partitionids})
      this.forkliftPopupVisible = true
    }
  },
  beforeRouteLeave(to, form, next){
    this.forkliftPopupVisible=false
    next()
  }
}
</script>
<style lang="scss" scoped>
.container{text-align: left;}
.title{font-size: 20px;}
.edit-btn{margin-left: 40px;}
</style>